﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="page-header">
        <h3>添加用户</h3>
    </div>

    <div class="row">
        <div class="col-md-4 col-sm-6">
            <form>
                <div class="form-group">
                    <label>角色</label>
                    <select id="roleID" class="form-control">
                    </select>
                </div>

                <div class="form-group">
                    <label>姓名</label>
                    <input id="name" class="form-control" type="text" value="张某" />
                </div>

                <div class="form-group">
                    <label>性别</label>
                    <div class="radio">
                        <label>
                            <input type="radio" name="sex" id="sex_nan" checked
                                   value="男">
                            男
                        </label>
                        <label>
                            <input type="radio" name="sex" id="sex_nv"
                                   value="女">
                            女
                        </label>
                    </div>

                </div>

                <div class="form-group">
                    <label>出生日期</label>
                    <input id="birthday" class="form-control" type="datetime-local" value="2006-06-06 00:00:00" />
                </div>

                <div class="form-group">
                    <label>手机号码</label>
                    <input id="phone" class="form-control" type="text" value="15512345678" />
                </div>

                <div class="form-group">
                    <label>密码</label>
                    <input id="pwd" class="form-control" type="text" value="123" />
                </div>

                <div class="form-group">
                    <label>状态</label>
                    <div class="checkbox">
                        <label><input type="checkbox" id="status" checked value="">正常</label>
                    </div>
                </div>

                <div class="form-group">
                    <input type="button" class="btn btn-success" value="立即保存" onclick="Save()" />
                </div>

            </form>
        </div>
    </div>



    <script src="/Static/Script/jquery-3.7.0.min.js"></script>
    <script type="text/javascript">

        //获取角色数据并给下拉框赋值
        $.get("/Ajax/RolesHandler.ashx?type=all", function (res) {
            console.log(res);
            res.data.forEach(function (v) {
                $('<option></option>').val(v.RoleID).text(v.RoleName)
                    .appendTo($("#roleID"));
            })
        })

        function Save() {
            var roleID = $("#roleID").val();
            var name = $("#name").val();
            var sex = $("input[name=sex]:checked").val();
            var birthday = $("#birthday").val();
            var phone = $("#phone").val();
            var pwd = $("#pwd").val();
            //var status = $("#status")[0].checked;  // js 用法
            var status = $("#status").prop("checked")  // jq 用法


            $.post("/Ajax/UsersHandler.ashx?type=add", {
                model: JSON.stringify({
                    userid: 0,
                    roleid: roleID,
                    name: name,
                    sex: sex,
                    birthday: birthday,
                    phone: phone,
                    pwd: pwd,
                    status: status
                })
            }, function (res) {
                console.log(res);
                if (res.code == 1) {
                    alert(res.msg);
                    location.href = "Index.html";
                } else {
                    alert(res.msg);
                }
            })
        }
    </script>
</body>
</html>